<template>
	<view class="container">
		<!-- 头像和个人信息 -->
		<view class="profile-section">
			<view class="avatar-box">
				<image src="https://fastly.picsum.photos/id/663/200/300.jpg?hmac=OYPBwsRmaygvAiTN0M4ZNNWBZqgbTGuH2aXkJ4FLX_M"
					class="avatar"></image>
			</view>
			<view class="info-box">
				<text class="job">正北堂中医馆</text>
			</view>
			<view class="skills-box">
				<text class="skills-title">机构简介</text>
				<text class="skills-content">医疗中心成立于2010年，是集医疗、科研、康复为一体的综合性医疗机构。拥有博士领衔的专家团队和先进的医疗设备。</text>
			</view>
		</view>
		<view class="works-section">
			<view class="title-container">
				<!-- <text class="section-title">医生</text>
				<text class="section-title">视频</text> -->
				<u-tabs :list="tablist" lineColor="#0bc5ae" :current="current" :activeStyle="{
				            fontWeight: 'bold',fontSize: '26px'
				        }" :scrollable="false" :inactiveStyle="{fontSize: '26px'}" :itemStyle="{ whiteSpace: 'nowrap' }"
					@click="handleTabClick"></u-tabs>
			</view>
			<view v-if="current==0" v-for="doctor in doctors" :key="doctor.id" class="doctor-card">
				<view class="doctor-header">
					<image class="doctor-avatar" :src="doctor.avatar" />
					<view class="doctor-basic-info">
						<view class="name-title-row">
							<text class="doctor-name">张三</text>
							<text class="doctor-title">{{ doctor.title }}</text>
						</view>
						<text class="doctor-hospital">{{ doctor.hospital }}</text>
					</view>
					<text class="right-arrow" @click="followUpImmediately">></text>
				</view>
				<view class="doctor-detail">
					<text class="doctor-specialty">{{ doctor.specialty }}</text>
				</view>
				<text class="doctor-fans-key">粉丝</text>
				<text class="doctor-fans-value">11</text>
				<text class="doctor-reputation-key">口碑</text>
				<text class="doctor-reputation-value">22</text>
			</view>
			<view v-if="current==1" v-for="doctor in doctors" :key="doctor.id" class="doctor-card">
				<view class="doctor-header">
					<image class="doctor-avatar" :src="doctor.avatar" />
					<view class="doctor-basic-info">
						<view class="name-title-row">
							<text class="doctor-name">{{ doctor.name }}</text>
							<text class="doctor-title">{{ doctor.title }}</text>
						</view>
						<text class="doctor-hospital">{{ doctor.hospital }}</text>
					</view>
					<text class="right-arrow">></text>
				</view>
				<view class="doctor-detail">
					<text class="doctor-specialty">{{ doctor.specialty }}</text>
				</view>
				<text class="doctor-fans-key">粉丝</text>
				<text class="doctor-fans-value">{{ doctor.fans }}</text>
				<text class="doctor-reputation-key">口碑</text>
				<text class="doctor-reputation-value">{{ doctor.reputation }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
					name: '医生',
					disabled: false
				}, {
					name: '视频',
					disabled: false
				}],
				current: 0,
				doctors: []
			}
		},
		created() {
			this.fetchDoctors()
		},
		methods: {
			followUpImmediately() {
				uni.navigateTo({
					url: '/chronicDisease/pages/my/doctorhomepage'
				});
			},
			handleTabClick(item) {
				this.current = item.index
			},
			fetchDoctors() {
				// 模拟API请求
				setTimeout(() => {
					this.doctors = [{
							id: 1,
							avatar: 'https://fastly.picsum.photos/id/663/200/300.jpg?hmac=OYPBwsRmaygvAiTN0M4ZNNWBZqgbTGuH2aXkJ4FLX_M',
							name: '李凯',
							title: '主任医师 | 中医 | 脾胃科',
							hospital: '上海中医药大学附属龙华医院',
							specialty: '擅长：医生擅长诊断、治疗及健康管理，具备手术操作能力，熟悉规范，能制定个性化康复方案，同时提供预防保健建议。',
							fans: 100,
							reputation: 200
						},
						{
							id: 2,
							avatar: 'https://fastly.picsum.photos/id/663/200/300.jpg?hmac=OYPBwsRmaygvAiTN0M4ZNNWBZqgbTGuH2aXkJ4FLX_M',
							name: '张明',
							title: '副主任医师 | 中医 | 内科',
							hospital: '北京中医药大学东直门医院',
							specialty: '擅长：医生擅长诊断、治疗及健康管理，具备手术操作能力，熟悉规范，能制定个性化康复方案，同时提供预防保健建议。',
							fans: 300,
							reputation: 400
						},
						{
							id: 3,
							avatar: 'https://fastly.picsum.photos/id/663/200/300.jpg?hmac=OYPBwsRmaygvAiTN0M4ZNNWBZqgbTGuH2aXkJ4FLX_M',
							name: '王五',
							title: '副主任医师 | 中医 | 内科',
							hospital: '北京中医药大学东直门医院',
							specialty: '擅长：医生擅长诊断、治疗及健康管理，具备手术操作能力，熟悉规范，能制定个性化康复方案，同时提供预防保健建议。',
							fans: 500,
							reputation: 600
						}
					]
				}, 500)

				// 实际项目中使用uni.request
				// uni.request({
				//   url: '你的API地址',
				//   success: (res) => {
				//     this.doctors = res.data
				//   }
				// })
			}
		}


	}
</script>

<style>
	.container {
		padding: 20px;
	}

	.profile-section {
		background-color: #00bc8a;
		padding: 20px;
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.section-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 15px;
		display: block;
	}

	.title-container {
		display: flex;
		justify-content: space-around;
		margin-bottom: 15px;
	}

	.avatar-box {
		display: flex;
		justify-content: center;
		margin-bottom: 15px;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 60px;
		border: 3px solid #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.doctor-avatar {
		width: 120px;
		height: 120px;
		border-radius: 60px;
		border: 3px solid #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.info-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 20px;
	}


	.job {
		font-size: 26px;
		color: #333;
		font-weight: bold;
		display: block;
		margin-top: 5px;
	}

	.skills-box {
		margin-top: 15px;
	}

	.skills-title {
		color: yellow;
		font-size: 20px;
		font-weight: bold;
		margin-right: 15px;
	}

	.skills-content {
		font-size: 16px;
	}

	.notice-section,
	.works-section {
		background: #fff;
		border-radius: 10px;
	}

	.doctor-card {
		padding: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.doctor-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.doctor-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.doctor-basic-info {
		flex: 1;
	}

	.doctor-name {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		margin-right: 16rpx;
	}

	.doctor-title,
	.doctor-hospital {
		display: block;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 4rpx;
	}

	.doctor-specialty {
		font-size: 26rpx;
		color: #333;
		line-height: 1.5;
		margin-bottom: 16rpx;
	}


	.doctor-detail {
		margin-bottom: 20rpx;
		/* 控制下方间距 */
	}

	.doctor-fans-value {
		font-size: 24rpx;
		color: #ffaa00;
	}

	.doctor-reputation-value {
		font-size: 24rpx;
		color: #ffaa00;
	}

	.doctor-reputation-key {
		margin-left: 10px;
	}

	.right-arrow {
		margin-left: 100px;
		color: #999;
		font-size: 26px;
		font-weight: bold;
	}
</style>